@import 'variables';

// Global styles for AncientSeeker
body {
  font-family: $font-family-primary;
  font-size: $font-size-base;
  line-height: $line-height-normal;
  color: $text-primary;
  background-color: #faf6ef;
  /* 全屏宣纸纹理 + 细腻点阵 */
  background-image:
    radial-gradient(rgba(68,54,35,.06) 1px, transparent 1px),
    url('/images/textures/xuan-paper-light.png');
  background-size: 22px 22px, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: top left, center center;
  margin: 0;
  padding: 0;
}

// Themed Element Plus confirm dialog (MessageBox)
:root { --as-box-radius: 20px; }
.el-overlay-message-box .el-message-box { 
  border-radius: var(--as-box-radius); 
  background: linear-gradient(135deg,#fbfaf8,#f2ede4); 
  border:1px solid #e0d2c2; 
  box-shadow:0 10px 38px -12px rgba(0,0,0,0.18),0 4px 18px -6px rgba(0,0,0,0.08);
  padding:18px 20px 20px; 
}
.el-overlay-message-box .el-message-box__header { margin:0 0 4px; padding:0; }
.el-overlay-message-box .el-message-box__title { font-size:16px; font-weight:600; letter-spacing:.5px; color:#5a4324; }
.el-overlay-message-box .el-message-box__content { font-size:13px; line-height:1.6; color:#5a4d3c; padding:4px 2px 12px; }
.el-overlay-message-box .el-message-box__btns { padding-top:4px; }
.el-overlay-message-box .el-button { border-radius:16px; font-weight:600; letter-spacing:.5px; }
.el-overlay-message-box .el-button--primary { 
  background:linear-gradient(120deg,#cfa355,#e2c98a); border:none; color:#fff;
  box-shadow:0 3px 10px -4px rgba(160,120,50,.45);
}
.el-overlay-message-box .el-button--primary:hover { filter:brightness(1.06); }
.el-overlay-message-box .el-button--danger { 
  background:linear-gradient(120deg,#d35b4f,#e07f74); border:none; color:#fff; 
  box-shadow:0 3px 10px -4px rgba(180,70,50,.45); }
.el-overlay-message-box .el-button--danger:hover { filter:brightness(1.05); }
.el-overlay-message-box .el-button:not(.el-button--primary):not(.el-button--danger){
  background:linear-gradient(120deg,#f4eee6,#eadecf); border:1px solid #ddcdbb; color:#5d4934; }
.el-overlay-message-box .el-button:not(.el-button--primary):not(.el-button--danger):hover{ background:linear-gradient(120deg,#f8f3ec,#efe5d9); }
.el-overlay-message-box .el-message-box__status.el-icon-warning { color:#d08a2a; }

@media (prefers-color-scheme: dark) {
  .el-overlay-message-box .el-message-box { background:linear-gradient(135deg,#3a332c,#2e2722); border-color:#4a4036; }
  .el-overlay-message-box .el-message-box__title { color:#e9ddcf; }
  .el-overlay-message-box .el-message-box__content { color:#d6c9b9; }
  .el-overlay-message-box .el-button:not(.el-button--primary):not(.el-button--danger){ background:linear-gradient(120deg,#4a423a,#3d352f); border-color:#5a4f44; color:#e0d4c6; }
  .el-overlay-message-box .el-button:not(.el-button--primary):not(.el-button--danger):hover{ background:linear-gradient(120deg,#524940,#453d36); }
}

// Reset default styles
* {
  box-sizing: border-box;
}

// Utility classes
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-weight-light { font-weight: $font-weight-light; }
.font-weight-normal { font-weight: $font-weight-normal; }
.font-weight-medium { font-weight: $font-weight-medium; }
.font-weight-semibold { font-weight: $font-weight-semibold; }
.font-weight-bold { font-weight: $font-weight-bold; }

.text-primary { color: $primary-color; }
.text-secondary { color: $text-secondary; }
.text-muted { color: $text-muted; }
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-error { color: $error-color; }

// Spacing utilities
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

@each $size, $value in (
  'xs': $spacing-xs,
  'sm': $spacing-sm,
  'md': $spacing-md,
  'lg': $spacing-lg,
  'xl': $spacing-xl,
  'xxl': $spacing-xxl,
  'xxxl': $spacing-xxxl
) {
  .m-#{$size} { margin: $value; }
  .mt-#{$size} { margin-top: $value; }
  .mr-#{$size} { margin-right: $value; }
  .mb-#{$size} { margin-bottom: $value; }
  .ml-#{$size} { margin-left: $value; }
  .mx-#{$size} { margin-left: $value; margin-right: $value; }
  .my-#{$size} { margin-top: $value; margin-bottom: $value; }
  
  .p-#{$size} { padding: $value; }
  .pt-#{$size} { padding-top: $value; }
  .pr-#{$size} { padding-right: $value; }
  .pb-#{$size} { padding-bottom: $value; }
  .pl-#{$size} { padding-left: $value; }
  .px-#{$size} { padding-left: $value; padding-right: $value; }
  .py-#{$size} { padding-top: $value; padding-bottom: $value; }
}

// Layout utilities
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md;
  
  @media (min-width: $breakpoint-md) {
    padding: 0 $spacing-lg;
  }
  
  @media (min-width: $breakpoint-xl) {
    padding: 0 $spacing-xl;
  }
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

// Border utilities
.border { border: 1px solid $border-light; }
.border-t { border-top: 1px solid $border-light; }
.border-r { border-right: 1px solid $border-light; }
.border-b { border-bottom: 1px solid $border-light; }
.border-l { border-left: 1px solid $border-light; }

.rounded { border-radius: $border-radius; }
.rounded-sm { border-radius: $border-radius-sm; }
.rounded-md { border-radius: $border-radius-md; }
.rounded-lg { border-radius: $border-radius-lg; }
.rounded-xl { border-radius: $border-radius-xl; }
.rounded-full { border-radius: $border-radius-full; }

// Shadow utilities
.shadow-sm { box-shadow: $shadow-sm; }
.shadow { box-shadow: $shadow; }
.shadow-md { box-shadow: $shadow-md; }
.shadow-lg { box-shadow: $shadow-lg; }
.shadow-xl { box-shadow: $shadow-xl; }
.shadow-none { box-shadow: none; }

// Common transitions
.transition {
  transition: all $duration-base $ease-in-out;
}

.transition-opacity {
  transition: opacity $duration-base $ease-in-out;
}

.transition-transform {
  transition: transform $duration-base $ease-in-out;
}

// Responsive utilities
.hidden { display: none; }

@media (max-width: #{$breakpoint-sm - 1px}) {
  .hidden-xs { display: none; }
}

@media (min-width: $breakpoint-sm) and (max-width: #{$breakpoint-md - 1px}) {
  .hidden-sm { display: none; }
}

@media (min-width: $breakpoint-md) and (max-width: #{$breakpoint-lg - 1px}) {
  .hidden-md { display: none; }
}

@media (min-width: $breakpoint-lg) {
  .hidden-lg { display: none; }
}

  /* ========= Explore Theming ========= */
  .explore-themed { border-radius: 18px; padding: 14px 14px 6px; box-shadow: 0 12px 26px rgba(0,0,0,.06); border: 1px solid #eadfcd; background: rgba(255,255,255,.9); }
  /* 全屏铺开：在 fullWidth 页面消除左右留白 */
  .full-bleed { margin-left: calc(-1 * (min(26px, 5vw))); margin-right: calc(-1 * (min(26px, 5vw))); }
  .explore-themed.full { border-radius: 0; padding: 18px 20px 10px; border-left: none; border-right: none; }

  .explore-header-bar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 10px;
  }
  .explore-title {
    font-family: $font-family-serif;
    font-size: 26px;
    letter-spacing: .5px;
    color: #3b2a17;
    margin: 0;
    position: relative;
  }
  .explore-sub { margin:0; color:#6e5a44; font-size:13px; }

  .badge-level {
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#fff8e8,#f5ead6);
    border:1px solid #ead9bd; color:#6a4b19; padding:4px 10px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  }
  .badge-level .dot { width:8px; height:8px; border-radius:50%; background:#cfa355; box-shadow:0 0 0 2px rgba(207,163,85,.25); }

  .toolbar { margin-left:auto; display:flex; gap:8px; }
  .toolbar .el-button { border-radius: 18px; font-weight:600; letter-spacing:.3px; }
  .toolbar .el-button:not(.el-button--primary){
    background: linear-gradient(120deg,#f7efe3,#efe4d4); border:1px solid #e6d7c2; color:#5b462f;
  }
  .toolbar .el-button:not(.el-button--primary):hover{ filter: brightness(1.02); }
  .toolbar .el-button--primary{
    background: linear-gradient(120deg,#cfa355,#e2c98a); border:none; color:#fff; box-shadow:0 4px 14px -6px rgba(200,150,60,.5);
  }

  .filters-bar { display:flex; gap:10px; margin:12px 0 16px; }
  .filters-bar .el-input__wrapper, .filters-bar .el-select .el-input__wrapper{
    border-radius: 14px; background:linear-gradient(120deg,#faf5ee,#f0e7da); border:1px solid #e7d9c5; box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }

  .node-card.modern-vintage { cursor:pointer; margin-bottom:14px; border-radius:16px; overflow:hidden; border:1px solid #eadfcd; background:linear-gradient(180deg,#fff,#faf6ef);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
  }
  .node-card.modern-vintage:hover { transform: translateY(-1px); }
  .node-card.modern-vintage.locked { filter:grayscale(.55); opacity:.8; cursor:not-allowed; }
  .node-card .title { font-weight:700; margin-bottom:6px; color:#3a2a17; }
  .node-card .desc { color:#6b5a46; font-size:13px; min-height: 38px; }
  .node-card .meta { display:flex; gap:6px; margin-top:8px; }
  .node-card .el-tag { border-radius:999px; }

  .graph-wrap { border-radius:14px; border:1px solid #eadfcd; background:linear-gradient(180deg,#fff,#fbf6ee); padding:10px; box-shadow:0 8px 16px rgba(0,0,0,.05); }
  .graph-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .graph-tools { display:flex; gap:10px; }
  .graph-lv-title { font-weight:700; }